import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
// 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D
import { resolve } from 'path'
import compression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd(), 'VITE_') // 加载指定前缀的变量

    return {
        base: '/', // 设置打包路径
        plugins: [
            compression({ algorithm: 'gzip' }), // 生成 .gz 文件
            vue(),
            // 按需加载
            Components({
                resolvers: [
                    AntDesignVueResolver({
                        importStyle: 'less', // 启用 Less 样式（支持主题定制）
                        resolveIcons: true, // 自动解析图标组件
                    }),
                ],
            }),
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'), // 设置 `@` 指向 `src` 目录
            },
        },
        build: {
            outDir: 'dist', // 输出目录
            assetsDir: 'assets', // 静态资源目录
            sourcemap: false, // 生产环境关闭 Source Map
            minify: mode === 'production' ? 'terser' : false, // 生产环境压缩代码
            terserOptions: {
                compress: {
                    drop_console: mode === 'production', // 生产环境移除 console
                    drop_debugger: mode === 'production',
                },
            },
            rollupOptions: {
                output: {
                    manualChunks: (id) => {
                        if (id.includes('node_modules')) {
                            return 'vendor' // 拆分第三方库
                        }
                    },
                    // 确保静态资源路径正确
                    assetFileNames: (assetInfo) => {
                        const info = assetInfo.name?.split('.') || []
                        const ext = info[info.length - 1]
                        if (/\.(css|less)$/.test(assetInfo.name || '')) {
                            return `assets/css/[name]-[hash].${ext}`
                        }
                        if (
                            /\.(png|jpe?g|gif|svg|ico|webp)$/.test(
                                assetInfo.name || ''
                            )
                        ) {
                            return `assets/images/[name]-[hash].${ext}`
                        }
                        if (
                            /\.(woff2?|eot|ttf|otf)$/.test(assetInfo.name || '')
                        ) {
                            return `assets/fonts/[name]-[hash].${ext}`
                        }
                        return `assets/[name]-[hash].${ext}`
                    },
                },
            },
        },
        server: {
            host: '0.0.0.0', // 允许局域网访问
            port: 4000, // 设置服务启动端口号
            open: true, // 设置服务启动时是否自动打开浏览器
            cors: true, // 允许跨域

            // 设置代理，根据我们项目实际情况配置
            proxy: {
                [env.VITE_APP_BASE_API]: {
                    target: env.VITE_APP_BASE_URL,
                    changeOrigin: true,
                    rewrite: (path) =>
                        path.replace(
                            new RegExp(`^${env.VITE_APP_BASE_API}`),
                            ''
                        ),
                },
            },
        },
        // assetsInclude: ['​**​/*.glb'] // 允许导入.glb文件
        css: {
            preprocessorOptions: {
                less: {
                    javascriptEnabled: true, // 启用 Less 的 JavaScript 解析功能
                    // 全局变量（可选）
                    additionalData: `@primary-color: #1890ff;`,
                },
            },
        },
    }
})
